<template>
	<div class="outer">
		<!-- 三级分类导航 -->
		<NavPage />
		<div class="main">
			<div class="py-container">
				<!--面包屑导航-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<span href="#">全部结果</span>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<!-- 点击三级导航获得的面包屑 -->
						<li class="with-x" v-show="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeBreadcrumb">×</i></li>
						<!-- 通过搜索关键词得到的面包屑 -->
						<li class="with-x" v-show="searchParams.keyword">{{searchParams.keyword}}<i @click="removeKeyword">×</i></li>
						<!-- 品牌的面包屑 -->
						<li class="with-x" v-show="trademarkName">{{ trademarkName }}<i @click="removeTrademark">x</i></li>
						<!-- 点击具体属性(内存大小，电池容量)得到的面包屑 -->
						<!-- 因为可能点击很多个具体参数 所以用v-for遍历 -->
						<li class="with-x" v-for="(prop,index) in props" :key="prop">{{prop}}<i @click="removeAttrValue(index)">x</i></li>
					</ul>
				</div>

				<!-- 搜索器 -->
				<SearchSelector/>

				<!--商品展示区-->
				<div class="details clearfix">
					<!-- 列表操作区 -->
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li :class="{active:isPrice}" @click="changeOrder(1)">
									<a href="javascript:;">综合<span v-show="isPrice" class="iconfont" :class="{'icon-shangfan':isUp,'icon-xiafan':!isUp}"></span></a>
								</li>
								<li :class="{active:!isPrice}"  @click="changeOrder(2)">
									<a href="javascript:;">价格<span v-show="!isPrice" class="iconfont" :class="{'icon-shangfan':isUp,'icon-xiafan':!isUp}"></span></a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品列表 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="good in goodsList" :key="good.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link  :to="'/detail/'+good.id"><img v-lazy="good.defaultImg" /></router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥&nbsp;</em>
											<i>{{good.price}}</i>
										</strong>
									</div>
									<div class="attr">
										<router-link  :to="`/detail/${good.id}`" :title="good.title" v-html="good.title"></router-link>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
									<div class="operate">
										<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
										<a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- 分页器 -->
					<Pagination :total="total" :pageSize="searchParams.pageSize" :continues="5" :pageNo="searchParams.pageNo" 
						@change-pageNo="getPageNo">			
					</Pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import SearchSelector from './SearchSelector'
	import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'
	import './fontIcon/iconfont.css'
	export default {
		name: 'SearchPage',
		components: {
			SearchSelector,	
		},
		methods: {
			...mapActions('search', ['getSearchGoodsInfo']),
			// ...mapMutations('search',['changeOrder']),
			// 1.移除三级导航面包屑
			removeBreadcrumb(){
			//	点击面包屑上的x号后 会做什么事？ （注意：面包屑分为两种：1.点击三级导航得到 2.关键词搜索得到）
			// 		1.将当前的对应面包屑及其数据删除掉
			// 		2.searchParams发生了变化 所以重新发送请求 搜索数据
			// 		3.改变路由路径，要不然一刷新 searchParams会重新搜集到原来的参数 数据又回来了

			// 保留通过搜索获得的关键词面包屑 删除通过点击三级导航获得的面包屑
				const {keyword} = this.$route.params
				this.$router.push({
					name:'search',
					params:{keyword}
				})
			},
			// 2.移除关键词面包屑
			removeKeyword(){
				// 保留query 删除通过搜索获得的关键词面包屑
				// 注意：当删除了面包屑中的关键词后，也要将搜索框中的关键词清除掉，此时需要用到全局事件总线(main.js)

				// 重新获取路由信息
				const {query} = this.$route
				// 因为删除了关键词 所以重新改变路由
				this.$router.push({
					name:'search',
					query:{
						...query,
						keyword:undefined
					},
				});
				// 触发事件，清除文本框
				this.$eventBus.$emit("remove-keyword");
			},

			// 3.移除通过点击品牌得到的面包屑
			// (业务逻辑：点击x号 给trademark赋值为undefined 路由自动过滤undefined 重新发送请求 就得到没有点击品牌的页面了)
			removeTrademark(trademark){
				// 给trademark赋为undefined 路由会自动过滤值为undefined的属性，就可以重新发送请求了
				this.searchParams.trademark = undefined;
				// 重新发送请求  已通过watch深度监听searchParams 写过重新发送请求了 不用再写
				// this.getSearchGoodsInfo(this.searchParams)
			},

			// 4.移除详细参数的面包屑
			removeAttrValue(index){
				// 因为有可能点击很多个具体参数 所以根据具体参数的长度进行遍历 并根据下标删除
				this.searchParams.props.splice(index,1);
			},

			// 5.实现分页 获取子组件传递过来的页码值
			getPageNo(pageNo){
				this.searchParams.pageNo = pageNo
			},

			changeOrder(newVal){
				console.log('112233')
				this.$store.commit('search/changeOrder',newVal)
			}

			// 6.点击实现切换及升降排序
			// changeOrder(newVal){
			// 	let {oldVal,oldDirect} = this.searchParams.order.split(':');
			// 	if (newVal == oldVal) {
			// 		// 点击的是同一个 则只改变箭头指向
			// 		oldDirect = oldDirect === 'asc' ? 'desc':'asc'
			// 	} else {
			// 		// 如果点击的不是同一个 则改变 1 2 的值就行
			// 		oldVal = newVal
			// 	}
			// 	// 重新拼接
			// 	this.searchParams.order = `${oldVal}:${oldDirect}`
			// 	// 重新从第一页开始
			// 	this.searchParams.pageNo = 1;
			// }



		},
		// 从三级导航跳转到search时 会携带分类id 和名称
		// 通过搜索按钮跳转到search时，会携带keyword
		// 这些参数都会拼接到searchParams中 并向服务端发送请求
		// 	 另：在search页面如果单机三级导航或改变官籍此的话 会重新发送请求，路由规则会变
		// 	 注意：不能在mounted中收集参数数据，mounted只执行一次，跳转到search页面后，再单击三级导航mounted不再执行
		watch:{
			$route:{
			// 此处不需要开启深度监听，因为每次生成的路由对象都是新的路由对象
				immediate:true,
				handler(newVal){
					// 1.将旧的category设置为undefined，让路由对象忽略旧数据
					// this.searchParams.category1Id = undefined,
					// this.searchParams.category2Id = undefined,
					// this.searchParams.category3Id = undefined,
					// this.searchParams.categoryName = undefined,
					// this.searchParams.keyword = undefined

					// 1.将旧的category设置为undefined，让路由对象忽略旧数据(法2)
					// Object.assign 合并对象 更新后的覆盖老数据
					Object.assign(this.searchParams,{
						category1Id:undefined,
						category2Id:undefined,
						category3Id:undefined,
						categoryName:undefined,
						keyword:undefined
					}) 

					// 2. 将传递过来的数据进行赋值
					const {query,params} = newVal

					// 3.重新处理参数
					Object.assign(this.searchParams,query,params)

					// 4.根据重新发送请求
					this.$store.dispatch('search/getSearchGoodsInfoData',this.searchParams)
				}
			},
			searchParams:{
				deep:true,
				handler(newVal){
					console.log(11111);
					// 根据参数重新发送请求
					this.$store.dispatch('search/getSearchGoodsInfoData',this.searchParams)
				}
			}
		},
		computed:{
			...mapGetters('search',['goodsList',"total"]),
			...mapState('search',['searchParams']),
			// 品牌名称
			trademarkName(){
				const {trademark} = this.searchParams;
				return trademark ? trademark.split(":")[1]:""
			},
			
			// 详细属性
			props(){
				return this.searchParams.props.map(item=>{
					const [id,attrValue,attrName] = item.split(":");
					return `${attrName}:${attrValue}`;
				})
			},

			// 添加一个控制是否高亮的计算属性
			isPrice(){
				return this.searchParams.order.split(':')[0] === '1';
			},

			// 添加一个属性控制箭头指向
			isUp(){
				return this.searchParams.order.split(':')[1] === 'asc';	
			}
		},
	}
</script>

<style lang="less" scoped>
	.main {
		margin: 10px 0;

		.py-container {
			width: 1200px;
			margin: 0 auto;

			.bread {
				margin-bottom: 5px;
				overflow: hidden;

				.sui-breadcrumb {
					padding: 3px 15px;
					margin: 0;
					font-weight: 400;
					border-radius: 3px;
					float: left;

					li {
						display: inline-block;
						line-height: 18px;

						a {
							color: #666;
							text-decoration: none;

							&:hover {
								color: #4cb9fc;
							}
						}
					}
				}

				.sui-tag {
					margin-top: -5px;
					list-style: none;
					font-size: 0;
					line-height: 0;
					padding: 5px 0 0;
					margin-bottom: 18px;
					float: left;

					.with-x {
						font-size: 12px;
						margin: 0 5px 5px 0;
						display: inline-block;
						overflow: hidden;
						color: #000;
						background: #f7f7f7;
						padding: 0 7px;
						height: 20px;
						line-height: 20px;
						border: 1px solid #dedede;
						white-space: nowrap;
						transition: color 400ms;
						cursor: pointer;

						i {
							margin-left: 10px;
							cursor: pointer;
							font: 400 14px tahoma;
							display: inline-block;
							height: 100%;
							vertical-align: middle;
						}

						&:hover {
							color: #28a3ef;
						}
					}
				}
			}

			.details {
				margin-bottom: 5px;

				.sui-navbar {
					overflow: visible;
					margin-bottom: 0;

					.filter {
						min-height: 40px;
						padding-right: 20px;
						background: #fbfbfb;
						border: 1px solid #e2e2e2;
						padding-left: 0;
						border-radius: 0;
						box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

						.sui-nav {
							position: relative;
							left: 0;
							display: block;
							float: left;
							margin: 0 10px 0 0;

							li {
								float: left;
								line-height: 18px;

								a {
									display: block;
									cursor: pointer;
									padding: 11px 15px;
									color: #777;
									text-decoration: none;
								}

								&.active {
									a {
										background: #e1251b;
										color: #fff;
									}
								}
							}
						}
					}
				}

				.goods-list {
					margin: 20px 0;

					ul {
						display: flex;
						flex-wrap: wrap;

						li {
							height: 100%;
							width: 20%;
							margin-top: 10px;
							line-height: 28px;

							.list-wrap {
								.p-img {
									padding-left: 15px;
									width: 215px;
									height: 255px;

									a {
										color: #666;

										img {
											max-width: 100%;
											height: auto;
											vertical-align: middle;
										}
									}
								}

								.price {
									padding-left: 15px;
									font-size: 18px;
									color: #c81623;

									strong {
										font-weight: 700;

										i {
											margin-left: -5px;
										}
									}
								}

								.attr {
									padding-left: 15px;
									width: 85%;
									overflow: hidden;
									margin-bottom: 8px;
									min-height: 38px;
									cursor: pointer;
									line-height: 1.8;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;

									a {
										color: #333;
										text-decoration: none;
									}
								}

								.commit {
									padding-left: 15px;
									height: 22px;
									font-size: 13px;
									color: #a7a7a7;

									span {
										font-weight: 700;
										color: #646fb0;
									}
								}

								.operate {
									padding: 12px 15px;

									.sui-btn {
										display: inline-block;
										padding: 2px 14px;
										box-sizing: border-box;
										margin-bottom: 0;
										font-size: 12px;
										line-height: 18px;
										text-align: center;
										vertical-align: middle;
										cursor: pointer;
										border-radius: 0;
										background-color: transparent;
										margin-right: 15px;
									}

									.btn-bordered {
										min-width: 85px;
										background-color: transparent;
										border: 1px solid #8c8c8c;
										color: #8c8c8c;

										&:hover {
											border: 1px solid #666;
											color: #fff !important;
											background-color: #666;
											text-decoration: none;
										}
									}

									.btn-danger {
										border: 1px solid #e1251b;
										color: #e1251b;

										&:hover {
											border: 1px solid #e1251b;
											background-color: #e1251b;
											color: white !important;
											text-decoration: none;
										}
									}
								}
							}
						}
					}
				}

				.page {
					width: 733px;
					height: 66px;
					overflow: hidden;
					float: right;

					.sui-pagination {
						margin: 18px 0;

						ul {
							margin-left: 0;
							margin-bottom: 0;
							vertical-align: middle;
							width: 490px;
							float: left;

							li {
								line-height: 18px;
								display: inline-block;

								a {
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									border: 1px solid #e0e9ee;
									margin-left: -1px;
									font-size: 14px;
									padding: 9px 18px;
									color: #333;
								}

								&.active {
									a {
										background-color: #fff;
										color: #e1251b;
										border-color: #fff;
										cursor: default;
									}
								}

								&.prev {
									a {
										background-color: #fafafa;
									}
								}

								&.disabled {
									a {
										color: #999;
										cursor: default;
									}
								}

								&.dotted {
									span {
										margin-left: -1px;
										position: relative;
										float: left;
										line-height: 18px;
										text-decoration: none;
										background-color: #fff;
										font-size: 14px;
										border: 0;
										padding: 9px 18px;
										color: #333;
									}
								}

								&.next {
									a {
										background-color: #fafafa;
									}
								}
							}
						}

						div {
							color: #333;
							font-size: 14px;
							float: right;
							width: 241px;
						}
					}
				}
			}
		}
	}
</style>